<template>
  <!-- 工作票 -->
  <div
    class="workOrder"
    v-for="(item, index) in workBarList"
    :key="item"
    @click="selectWorkType(item, index)"
  >
    <div :class="['workBar', item.type, item.checked ? 'checked' : '']">
      <div class="workIcon"><CopyOutlined /></div>
      {{ item.name }}
      <div class="workNum">{{ item.num }}</div>
    </div>
  </div>
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="工作票编号">
        <a-input
          v-model:value="filterForm.ticketCode"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="工单编号">
        <a-input
          v-model:value="filterForm.workOrderNumber"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="电站名称">
        <a-select
          v-model:value="filterForm.stationId"
          class="formInput"
          placeholder="请选择"
          allow-clear
          show-search
          optionFilterProp="label"
        >
          <a-select-option
            v-for="item in stationtList"
            :value="item.stationId"
            :key="item.stationId"
            :label="item.stationName"
          >
            {{ item.stationName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="工作票状态">
        <a-select
          v-model:value="filterForm.workTicketStatus"
          class="formInput"
          placeholder="请选择"
          allow-clear
          show-search
          optionFilterProp="label"
        >
          <a-select-option
            v-for="item in WORK_TICKET_STATUS_LIST"
            :value="item.value"
            :key="item.value"
            :label="item.label"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="是否延期">
        <a-select
          v-model:value="filterForm.isDelay"
          class="formInput"
          placeholder="请选择"
          allow-clear
        >
          <a-select-option :value="0">否</a-select-option>
          <a-select-option :value="1">是</a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="发起人">
        <a-input
          v-model:value="filterForm.initiator"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item> -->
      <a-button type="primary" class="filterBtn" @click="handleFilter"
        >查询</a-button
      >
      <a-button
        v-hasPermission="'addTicket'"
        type="primary"
        class="filterBtn greenBtn"
        @click="handleAddTicket"
        >新增</a-button
      >
    </a-form>
  </div>
  <div class="tableContent" ref="tableContainerRef">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="tableScroll"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'delay'">
          <!-- 是否延期 1：是 0：否 -->
          {{ record.delay ? "是" : "否" }}
        </template>
        <template v-if="column.key === 'state'">
          <!-- 工作票状态 -->
          {{ TICKET_STATUS[record.state] }}
        </template>
        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleTicket(record)">查看</a-button>
          <a-button
            v-if="
              (selectType === TICKET_STATUS_ENUM.SUM ||
                selectType === TICKET_STATUS_ENUM.AUDIT) &&
              record.state === TICKET_STATUS_ENUM.AUDIT
            "
            type="link"
            @click="handleAudit(record)"
            v-hasPermission="'ticketAudit'"
            >审核</a-button
          >
          <a-button
            v-if="
              record.state === TICKET_STATUS_ENUM.EFFECTIVE ||
              record.state === TICKET_STATUS_ENUM.EXPIRED
            "
            type="link"
            v-hasPermission="'extension'"
            @click="handleDelay(record)"
            >申请延期</a-button
          >
          <a-button
            v-if="
              (selectType === TICKET_STATUS_ENUM.SUM ||
                selectType === TICKET_STATUS_ENUM.DELAY) &&
              record.state === TICKET_STATUS_ENUM.DELAY
            "
            type="link"
            @click="handleDelayAudit(record)"
            v-hasPermission="'ticketDelayAudit'"
            >延期审核</a-button
          >
          <a-button
            v-if="
              ((selectType === TICKET_STATUS_ENUM.SUM ||
                selectType === TICKET_STATUS_ENUM.EXPIRED) &&
                record.state === TICKET_STATUS_ENUM.EFFECTIVE) ||
              record.state === TICKET_STATUS_ENUM.EXPIRED
            "
            type="link"
            @click="handleClose(record)"
            v-hasPermission="'ticketClose'"
            >关闭</a-button
          >
          <a-popconfirm
            title="确定删除该记录吗？"
            @confirm="handleDelete(record)"
            ok-text="确定"
            cancel-text="取消"
          >
            <a-button type="link" danger v-hasPermission="'delete'"
              >删除</a-button
            >
          </a-popconfirm>
          <a-button type="link" @click="handleRecord(record)"
            >操作记录</a-button
          >
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getOrderList"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
  <!-- 审核 -->
  <TicketAudit
    :ticketAuditVisible="ticketAuditVisible"
    :rowData="rowData"
    @update:ticketAuditVisible="(val) => (ticketAuditVisible = val)"
    @getOrderList="getOrderList"
  />
  <!-- 延期审核 -->
  <DelayAudit
    :delayAuditVisible="delayAuditVisible"
    :rowData="rowData"
    @update:delayAuditVisible="(val) => (delayAuditVisible = val)"
    @getOrderList="getOrderList"
  />
  <!-- 关闭 -->
  <TicketClose
    :ticketCloseVisible="ticketCloseVisible"
    :rowData="rowData"
    @update:ticketCloseVisible="(val) => (ticketCloseVisible = val)"
    @getOrderList="getOrderList"
  />
  <!-- 工作票-->
  <Ticket
    :ticketVisible="ticketVisible"
    :ticketRowData="ticketRowData"
    @update:ticketVisible="(val) => (ticketVisible = val)"
    @getOrderList="getOrderList"
  />
  <!-- 新增工作票 -->
  <AddTicket
    :addTicketVisible="addTicketVisible"
    :rowData="rowData"
    :ticketRowData="ticketRowData"
    :infoData="infoData"
    :stationtList="stationtList"
    :isCopy="isCopy"
    :addType="2"
    @update:addTicketVisible="(val) => (addTicketVisible = val)"
    @getOrderList="getOrderList"
  />
  <!-- 申请延期 -->
  <Delay
    :delayVisible="delayVisible"
    :rowData="rowData"
    :ticketRowData="ticketRowData"
    @update:delayVisible="(val) => (delayVisible = val)"
    @getOrderList="getOrderList"
  />
  <!-- 操作记录 -->
  <RecordList
    :recordVisible="recordVisible"
    :rowData="rowData"
    @update:recordVisible="(val) => (recordVisible = val)"
  />
</template>
<script setup>
// 
import useTableScroll from "@/hooks/useTableScroll"
import TicketAudit from "./conpoments/ticketAudit.vue"
import DelayAudit from "./conpoments/delayAudit.vue"
import TicketClose from "./conpoments/ticketClose.vue"
import Ticket from "./conpoments/ticket.vue"
import AddTicket from "./conpoments/addTicket.vue"
import Delay from "./conpoments/delay.vue"
import RecordList from "./conpoments/recordList.vue"
import {
  WORK_ORDER_TYPE,
  WORK_TICKET_STATUS_LIST,
  WORK_ORDER_STATUS_ENUM,
  TICKET_STATUS_ENUM,
  TICKET_STATUS,
} from "@/constants/workOrder"

const $api = inject("$api")
const filterForm = ref({
  ticketCode: undefined,
  workOrderNumber: undefined,
  stationId: undefined,
  workTicketStatus: undefined,
  handler: undefined,
  initiator: undefined,
  isDelay: undefined,
  size: 10,
  current: 1,
})
const total = ref()
const delayAuditVisible = ref(false)
const ticketAuditVisible = ref(false)
const ticketCloseVisible = ref(false)
const ticketVisible = ref(false)
const tableData = ref([])
const rowData = ref({})
const tableLoading = ref(false)
const workBarList = ref([
  {
    name: "工作票总数",
    type: "SUM",
    num: 0,
    value: "ticketSum",
    checked: true,
  },
  {
    name: "待审核工作票",
    type: "AUDIT",
    num: 0,
    value: "ticketApprove",
    filter: TICKET_STATUS_ENUM.AUDIT,
    checked: false,
  },

  {
    name: "已生效工作票",
    type: "EFFECTIVE",
    num: 0,
    value: "ticketActive",
    filter: TICKET_STATUS_ENUM.EFFECTIVE,
    checked: false,
  },
  {
    name: "待延期审核工作票",
    type: "HANDLE",
    num: 0,
    value: "ticketDelayApprove",
    filter: TICKET_STATUS_ENUM.DELAY,
    checked: false,
  },

  {
    name: "已过期未关闭工作票",
    type: "NOTCLOSE",
    num: 0,
    value: "ticketExpireNotClose",
    filter: TICKET_STATUS_ENUM.EXPIRED,
    checked: false,
  },
  {
    name: "已关闭工作票",
    type: "FINISH",
    num: 0,
    value: "ticketClose",
    filter: TICKET_STATUS_ENUM.CLOSE,
    checked: false,
  },
  {
    name: "已驳回工作票",
    type: "RETURN",
    num: 0,
    value: "ticketReject",
    filter: TICKET_STATUS_ENUM.REJECT,
    checked: false,
  },
])
const columns = ref([
  {
    title: "工作票编号",
    dataIndex: "ticketCode",
    key: "ticketCode",
    resizable: true,
    width: 200,
    align: "center",
  },
  {
    title: "工单编号",
    dataIndex: "workOrderSerialCode",
    key: "workOrderSerialCode",
    resizable: true,
    width: 200,
    align: "center",
  },
  {
    title: "电站名称",
    dataIndex: "stationName",
    key: "stationName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "工作票状态",
    dataIndex: "state",
    key: "state",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "工作票到期时间",
    dataIndex: "expireDate",
    key: "expireDate",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "是否延期",
    dataIndex: "delay",
    key: "delay",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    align: "center",
    fixed: "right",
  },
])
function handleResizeColumn(w, col) {
  col.width = w
}
const handleDelayAudit = (data) => {
  rowData.value = data
  delayAuditVisible.value = true
}
const handleAudit = (data) => {
  rowData.value = data
  ticketAuditVisible.value = true
}
const handleClose = (data) => {
  rowData.value = data
  ticketCloseVisible.value = true
}
const ticketRowData = ref({})
const handleTicket = (data) => {
  ticketRowData.value = data
  ticketVisible.value = true
}
const tableContainerRef = ref(null)
const handleFilter = () => {
  filterForm.value.current = 1
  filterForm.value.size = 10
  getOrderList()
}
const stationtList = ref([])
const getCompanyStationtList = async () => {
  const res = await $api.companyStationtList({ es: 3 })
  if (res.code === 0) {
    stationtList.value = res.data
  }
}
const selectType = ref(WORK_ORDER_TYPE.SUM)

const selectWorkType = (item, index) => {
  selectType.value = item.filter
  for (const item of workBarList.value) {
    item.checked = false
  }
  workBarList.value[index].checked = true
  getOrderList(true)
}
const getOrderList = async (isFilter = false) => {
  const params = {
    ...filterForm.value,
    type: WORK_ORDER_TYPE.TICKET,
  }
  if (selectType.value !== WORK_ORDER_TYPE.SUM) {
    params.state = workBarList.value.find((item) => item.checked).filter
  }
  tableLoading.value = true
  if (!isFilter) {
    // 通过顶部工单状态点击筛选，不需要请求工单数量接口
    getWorkOrderCount(params)
  }
  const res = await $api.ticketPage(params)
  tableLoading.value = false
  if (res && res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}
const getWorkOrderCount = async (params) => {
  const res = await $api.workOrderCount(params)
  if (res && res.code === 0) {
    for (const item of workBarList.value) {
      item.num = res.data[item.value] || "0"
    }
  }
}
const isCopy = ref(false)
const addTicketVisible = ref(false)
const handleAddTicket = () => {
  isCopy.value = false
  addTicketVisible.value = true
}
//申请延期
const delayVisible = ref(false)
const handleDelay = (record) => {
  ticketRowData.value = record
  delayVisible.value = true
}
//删除
const handleDelete = async (record) => {
  const res = await $api.deleteTicket(record.id)
  if (res && res.code === 0) {
    message.success("删除成功")
    getOrderList()
  }
}
//操作记录
const recordVisible = ref(false)
const handleRecord = (record) => {
  rowData.value = record
  recordVisible.value = true
}
onMounted(async () => {
  getCompanyStationtList()
  await getOrderList()
})
const { tableScroll } = useTableScroll(tableData, tableContainerRef)
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
.workOrder {
  margin: 10px 20px 20px 0;
  display: inline-block;
  cursor: pointer;
  .workBar {
    width: 220px;
    height: 55px;
    line-height: 55px;
    position: relative;
    border-radius: 4px;
  }
  .workIcon {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    margin: 0 10px 0 10px;
  }
  .workNum {
    margin-left: 20px;
    position: absolute;
    right: 8px;
    top: 0px;
  }
  .SUM {
    border: 1px solid #1990ff;
    .workNum {
      color: rgba(25, 144, 255);
    }
    .workIcon {
      background: rgba(25, 144, 255);
    }
    .checked {
      background: rgba(25, 144, 255, 0.3);
    }
    &[class*=" checked"] {
      background: rgba(25, 144, 255, 0.3);
    }
  }
  .EFFECTIVE {
    border: 1px solid #30c25b;
    .workNum {
      color: #30c25b;
    }
    .workIcon {
      background: #30c25b;
    }
    &[class*=" checked"] {
      background: rgba(48, 194, 91, 0.3);
    }
  }
  .HANDLE {
    border: 1px solid rgb(250 204 20);
    .workNum {
      color: rgb(250 204 20);
    }
    .workIcon {
      background: rgb(250 204 20);
    }
    &[class*=" checked"] {
      background: rgba(250, 204, 20, 0.3);
    }
  }
  .COMFIRM {
    border: 1px solid rgb(22 194 195);
    .workNum {
      color: rgb(22 194 195);
    }
    .workIcon {
      background: rgb(22 194 195);
    }
    &[class*=" checked"] {
      background: rgba(22, 194, 195, 0.3);
    }
  }
  .FINISH {
    border: 1px solid rgba(240, 72, 100, 1);
    .workNum {
      color: rgba(240, 72, 100, 1);
    }
    .workIcon {
      background: rgba(240, 72, 100, 1);
    }
    &[class*=" checked"] {
      background: rgba(240, 72, 100, 0.3);
    }
  }
  .AUDIT {
    border: 1px solid #f59a23;
    .workNum {
      color: #f59a23;
    }
    .workIcon {
      background: #f59a23;
    }
    &[class*=" checked"] {
      background: rgba(245, 154, 35, 0.3);
    }
  }
  .RETURN {
    border: 1px solid rgb(215 215 215);
    .workNum {
      color: rgb(215 215 215);
    }
    .workIcon {
      background: rgb(215 215 215);
    }
    &[class*=" checked"] {
      background: rgba(215, 215, 215, 0.3);
    }
  }
  .NOTCLOSE {
    border: 1px solid rgb(22 194 195);
    .workNum {
      color: rgb(22 194 195);
    }
    .workIcon {
      background: rgb(22 194 195);
    }
    &[class*=" checked"] {
      background: rgba(22, 194, 195, 0.3);
    }
  }
}
</style>
